<template>
  <el-dialog
    v-model="dialogVisible"
    title="修改手机号码"
    width="400px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
      class="phone-form"
    >
      <el-form-item label="当前手机号">
        <span>{{ currentPhone }}</span>
      </el-form-item>

      <el-form-item label="验证码" prop="oldVerifyCode">
        <div class="verify-code-input">
          <el-input
            v-model="form.oldVerifyCode"
            placeholder="请输入当前手机验证码"
            maxlength="6"
          />
          <el-button
            type="primary"
            :disabled="oldCodeTimer > 0"
            @click="sendOldVerifyCode"
          >
            {{ oldCodeTimer > 0 ? `${oldCodeTimer}s后重试` : "获取验证码" }}
          </el-button>
        </div>
      </el-form-item>

      <el-form-item label="新手机号" prop="newPhone">
        <el-input
          v-model="form.newPhone"
          placeholder="请输入新手机号码"
          maxlength="11"
        />
      </el-form-item>

      <el-form-item label="验证码" prop="newVerifyCode">
        <div class="verify-code-input">
          <el-input
            v-model="form.newVerifyCode"
            placeholder="请输入新手机验证码"
            maxlength="6"
          />
          <el-button
            type="primary"
            :disabled="newCodeTimer > 0 || !form.newPhone"
            @click="sendNewVerifyCode"
          >
            {{ newCodeTimer > 0 ? `${newCodeTimer}s后重试` : "获取验证码" }}
          </el-button>
        </div>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="loading" @click="handleSubmit">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from "vue";
import { ElMessage } from "element-plus";

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  currentPhone: {
    type: String,
    required: true,
  },
});

const emit = defineEmits(["update:modelValue", "success"]);

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit("update:modelValue", val),
});

const formRef = ref(null);
const loading = ref(false);
const oldCodeTimer = ref(0);
const newCodeTimer = ref(0);

const form = ref({
  oldVerifyCode: "",
  newPhone: "",
  newVerifyCode: "",
});

const rules = {
  oldVerifyCode: [
    { required: true, message: "请输入当前手机验证码", trigger: "blur" },
    { len: 6, message: "验证码长度为6位", trigger: "blur" },
  ],
  newPhone: [
    { required: true, message: "请输入新手机号码", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
  newVerifyCode: [
    { required: true, message: "请输入新手机验证码", trigger: "blur" },
    { len: 6, message: "验证码长度为6位", trigger: "blur" },
  ],
};

// 发送旧手机验证码
const sendOldVerifyCode = async () => {
  try {
    // TODO: 调用发送验证码API
    ElMessage.success("验证码已发送");
    oldCodeTimer.value = 60;
    const timer = setInterval(() => {
      oldCodeTimer.value--;
      if (oldCodeTimer.value <= 0) {
        clearInterval(timer);
      }
    }, 1000);
  } catch (error) {
    ElMessage.error("验证码发送失败");
  }
};

// 发送新手机验证码
const sendNewVerifyCode = async () => {
  try {
    // TODO: 调用发送验证码API
    ElMessage.success("验证码已发送");
    newCodeTimer.value = 60;
    const timer = setInterval(() => {
      newCodeTimer.value--;
      if (newCodeTimer.value <= 0) {
        clearInterval(timer);
      }
    }, 1000);
  } catch (error) {
    ElMessage.error("验证码发送失败");
  }
};

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return;

  try {
    await formRef.value.validate();
    loading.value = true;

    // TODO: 调用修改手机API
    await new Promise((resolve) => setTimeout(resolve, 1000));

    ElMessage.success("手机号码修改成功");
    emit("success", form.value.newPhone);
    dialogVisible.value = false;
  } catch (error) {
    console.error(error);
    ElMessage.error("表单验证失败");
  } finally {
    loading.value = false;
  }
};

// 关闭弹窗
const handleClose = () => {
  formRef.value?.resetFields();
  form.value = {
    oldVerifyCode: "",
    newPhone: "",
    newVerifyCode: "",
  };
};
</script>

<style scoped>
.phone-form {
  padding: 20px;
}

.verify-code-input {
  display: flex;
  gap: 10px;
}

.verify-code-input .el-input {
  flex: 1;
}

.verify-code-input .el-button {
  width: 120px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>
